<template>
  <Form
    name="roleForm"
    ref="roleFormRef"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
    @finish="onToolFinish"
    :initialValues="currentForm"
  >
    <Card style="width: 100%">
      <Row>
        <Col>
          <FormItem name="roleName" label="角色名称" :rules="dictNameRules">
            <Input placeholder="请输入角色名称" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col>
          <FormItem name="roleKey" label="权限字符" :rules="dictTypeRules">
            <Input placeholder="请输入权限字符" style="width: 100%" />\
          </FormItem>
        </Col>
      </Row>
         <Row>
        <Col>
          <FormItem name="roleSort" label="角色顺序" initialValue="0">
           <InputNumber :min="0" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col>
          <FormItem name="status" label="状态">
            <RadioGroup
              :options="dict.type.sys_normal_disable"
              name="status"
            />
          </FormItem>
        </Col>
      </Row>
       <Row>
        <Col>
          <FormItem name="menuIds" label="菜单权限">
              <Tree
                v-if="menuOptions.length > 0"
                checkable
                :treeData="menuOptions"
                :expandedKeys="expandedKeys2"
                @expand="onExpand2"
                v-model="value2"
                @change="change2"
              />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col>
          <FormItem name="remark" label="备注">
            <TextArea placeholder="请输入" style="width: 100%" allowClear />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
          <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
            <Button
              type="primary"
              size="md"
              style="width: 100px"
              @click="sumbitForm"
              >提交</Button
            >
            <Button
              style="margin-left: 20px; width: 100px"
              size="md"
              @click="handleCancel"
              >取消</Button
            >
          </FormItem>
        </Col>
      </Row>
    </Card>
  </Form>
</template>

<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus } from "@/api/system/role";
import {
  treeselect as menuTreeselect,
  roleMenuTreeselect,
} from "@/api/system/menu";
import { Message } from "@uni/vue";
export default {
  dicts: ["sys_normal_disable"],
  props: {
    id: {
      default: "",
    },
    currentRow: {
      default: () => {},
    },
  },
  data() {
    return {
      labelCol: {
        span: 3,
      },
      wrapperCol: {
        span: 20,
      },
      // 菜单列表
      menuOptions: [],
      value2: [],
      expandedKeys2: [],

      currentForm: {
        roleName: this.currentRow.roleName,
        roleKey: this.currentRow.roleKey,
        roleSort: this.currentRow.roleSort,
        status: this.currentRow.status == "0" ? "0" : "1",
        menuIds: this.currentRow.menuIds,
        remark: this.currentRow.remark,
        menuCheckStrictly: true,
        deptCheckStrictly: true,
        deptIds: []
      },
      dictNameRules: [{ required: true, message: "请输入字典名称" }],
      dictTypeRules: [{ required: true, message: "字典类型不能为空" }],
      roleOptions: [],
    };
  },
  created() {
    this.getMenuTreeselect();
    if(this.id) {
      this.getRoleMenuTreeselect(this.id)
    }
  },
  methods: {
        /** 查询菜单树结构 */
    getMenuTreeselect() {
      let that = this;
      menuTreeselect().then((response) => {
        let array = response.data.map((org) => that.mapTree(org));
        this.menuOptions = array;
      });
    },
      /** 根据角色ID查询菜单树结构 */
    getRoleMenuTreeselect(roleId) {
      let that = this;
      return roleMenuTreeselect(roleId).then((response) => {
        console.log(response)
        let array = response.menus.map((org) => that.mapTree(org));
        this.value2 =["1069", "1070", "1071", "1072", "1073"]
        this.currentForm.menuIds = ["1069", "1070", "1071", "1072", "1073"]
        console.log(this.value2)
        this.menuOptions = array;
        return response;
      });
    },
        mapTree(org) {
      const haveChildren =
        Array.isArray(org.children) && org.children.length > 0;
      if (haveChildren) {
        return {
          title: org.label,
          value: String(org.id),
          children: org.children.map((i) => this.mapTree(i)),
        };
      } else {
        return {
          title: org.label,
          value: String(org.id),
        };
      }
    },
    handleCancel() {
      this.$emit("handleCancel");
    },
    sumbitForm() {
      this.$refs.roleFormRef.submit();
    },
       change2(value) {
      this.value2 = value;
    },
    onExpand2(expandedKeys) {
      this.expandedKeys2 = expandedKeys;
    },
    onToolFinish(formData) {
      formData.status = formData.status === "0" ? "0" : "1";
      formData.menuIds = formData.menuIds?formData.menuIds:[]
      if (this.id) {
        formData.roleId = this.id;
        updateRole(formData).then((response) => {
          if (response.code == 200) {
            Message.success({ text: "修改成功" });
            this.$emit("handleCancel");
          } else {
            Message.error({ text: "修改失败" });
          }
        });
      } else {
        addRole(formData).then((response) => {
          if (response.code == 200) {
            Message.success({ text: "新增成功" });
            this.$emit("handleCancel");
          } else {
            Message.error({ text: "新增失败" });
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .uni-modal-body {
  padding: 0;
}
::v-deep .uni-modal-footer {
  display: none;
}
::v-deep .uni-card-title {
  display: none;
}
</style>